<script setup>
import {ref,nextTick,getCurrentInstance} from 'vue'
import { getUserWallet } from '../../http/api'
import { useI18n } from 'vue-i18n'
const { locale } = useI18n()
//引入全局注册的proxy
const { proxy } = getCurrentInstance()
const { $t } = proxy;
// 用户信息对象
let userInfo = ref(undefined)
//返回顶部
const scrollTop = ref(0)
let $backTop = ref(proxy.$backTop)
$backTop.value(scrollTop.value)

// const $route = useRoute()
// 获取用户钱包信息
const getUserWalletFn = async()=>{
    let res = await getUserWallet()
    console.log(res,'res进去了49')
    if(res.code === 200){
        nextTick(()=>{
            userInfo.value.balance = res.result.balance
        })
    }
}
locale.value = localStorage.getItem('lang') || 'zhCN'
// 判断用户是否登录
let userInfos = localStorage.getItem('userInfo')
if (userInfos) {
    userInfo.value = JSON.parse(userInfos)
    getUserWalletFn()
}
//子组件登录返回事件
const loginEmit = (res) => {
    userInfo.value = res
    getUserWalletFn()
}
let isDark = ref(true)
if(localStorage.getItem('isDark') !== undefined){
    isDark.value = localStorage.getItem('isDark') === 'true' ? true : false
}
// 获取图片路径资源
const getImageUrl = (name) => {
    return new URL(`../../assets/img/home/${name}`, import.meta.url).href
}
// 子组件返回的切换主题颜色
const changeIsDarkEmit = (val) => {
    isDark.value = val
}
</script>
<template>
    <div class="homeBody"  :style="{ background: isDark ? `url(${getImageUrl('bg.png')})` : `url(${getImageUrl('bg2.png')})` }">
        <headNavigation  @changeIsDarkEmit="changeIsDarkEmit"  :isDark="isDark" :userInfo="userInfo" :menuTabWordIndex="2"    @loginEmit="loginEmit"></headNavigation>
        <div class="modelTop">
            <div class="nowEggPng">
                <div class="nowEggPngDiv top16">
                    <div class="jiantoubox">
                        <div :style="{ color: isDark ? '#fff' : '#282828' }">{{$t('msg.message.earn')}}</div>
                        <img class="jiantou" :src="isDark ? getImageUrl('whitejiantou.png') : getImageUrl('blackjiantou.png')" alt="">
                    </div>
                    <!-- <div class="realTime" style="font-weight: bold;">
                        EARN
                    </div> -->
                </div>
                <img :src="getImageUrl('title.png')" alt="">
            </div>
        </div>
        <div class="earnMain" :style="{background:isDark?'#000':'#fff'}">
            <div class="earnMainInput">
                <div class="earnMainInputL" :style="{color: isDark?'#fff':'#000',background:isDark?'rgba(255, 255, 255, .2)':'#f1f1f1'}">XXXXXXXXXXXXXXXX</div>
                <div class="earnMainInputR">{{$t('msg.message.copy')}}</div>
            </div>
            <div class="earnCountBox">
                <div class="earnCount">
                    <div class="earnCountNum">23</div>
                    <div :style="{color:isDark?'#fff':'#000'}">{{$t('msg.message.reBy')}}</div>
                </div>
                <div class="greyLine"></div>
                <div class="earnCount">
                    <div class="earnCountNum">0.00</div>
                    <div :style="{color:isDark?'#fff':'#000'}">{{$t('msg.message.Cashpayment')}}</div>
                </div>
                <div class="greyLine"></div>
                <div class="earnCount">
                    <div class="earnCountNum">23</div>
                    <div :style="{color:isDark?'#fff':'#000'}">{{$t('msg.message.Integralpayment')}}</div>
                </div>
                <div class="greyLine"></div>
                <div class="earnCount" style="border: unset;">
                    <div class="earnCountNum">0</div>
                    <div :style="{color:isDark?'#fff':'#000'}">{{$t('msg.message.copewith')}}</div>
                </div>
            </div>
            <div class="earnCenter">
                <img src="../../assets/vue.svg" alt="">
                <div :style="{color:isDark?'#fff':'#000'}">{{$t('msg.message.earnContent')}}</div>
            </div>
            <div class="hengLine"></div>
            <div class="botMain">
                <div class="botBox">
                    <img src="../../assets/img/earn/share.png"  class="marRight11"  alt="">
                    <div class="botBoxText">
                        <div class="shareText" :style="{color:isDark?'#fff':'#000'}">{{$t('msg.message.shareLink')}}</div>
                        <div class="botBoxShareT" :style="{color:isDark?'#fff':'#000'}">{{$t('msg.message.shareLinkContent')}}</div>
                    </div>
                </div>
                <div class="botBox">
                    <img src="../../assets/img/earn/price.png" class="marRight11" alt="">
                    <div class="botBoxText">
                        <div class="shareText"  :style="{color:isDark?'#fff':'#000'}">{{$t('msg.message.Monitoringdeposits')}}</div>
                        <div class="botBoxShareT" :style="{color:isDark?'#fff':'#000'}">{{$t('msg.message.MonitoringdepositsContent')}}</div>
                    </div>
                </div>
                <div class="botBox">
                    <img src="../../assets/img/earn/getPrice.png"  class="marRight11"  alt="">
                    <div class="botBoxText">
                        <div class="shareText"  :style="{color:isDark?'#fff':'#000'}">{{$t('msg.message.earnMoney')}}</div>
                        <div class="botBoxShareT"  :style="{color:isDark?'#fff':'#000'}">{{$t('msg.message.earnMoneyContent')}}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<style scoped>
.marRight11{
    width: 32px;
    margin-right: 11px;
}
.homeBody {
    max-width: 2560px;
    min-width: 1350px;
    /* height: 100vh; */
    padding-bottom: 50px;
    /* overflow-y: auto; */
    /* background-color: #0F123F; */
    background: url('../../assets/img/home/bg.png');
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: cover !important;
    padding-top: 101px;
    min-height: 100vh;
    margin: 0 auto;
}
.realTime{
    padding-left: 2px;
    font-size: 18px;
    color: #fff !important;
}
.nowEggPngDiv{
    position: absolute;
    display: flex;
    flex-direction: column;
    left: 76px;
    font-size: 40px;
    top: 14px;
}
.modelTop{
    padding-top: 20px;
}
.earnMain{
    max-width: 2560px;
    margin: 0 240px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #232323;
    padding-top: 47px;
    padding-bottom: 36px;
}
.earnMainInput{
    display: flex;
    padding-bottom: 67px;
    justify-content: center;
    width: 57%;
    flex-wrap: wrap;
}
.earnMainInputL{
    color: #fff;
    font-size: 16px;
    background: rgba(255, 255, 255, .2);
    width: 62%;
    margin-bottom: 20px;
    height: 48px;
    line-height: 48px;
    padding-left: 24px;
    margin-right: 14px;
}
.earnMainInputR{
    background: #FC8704;
    font-size: 20px;
    color: #fff;
    width: 88px;
    height: 48px;
    line-height: 48px;
    text-align: center;
    cursor: pointer;
}
.earnCountBox{
    display: flex;
    justify-content: space-between;
    width: 54%;
    align-items: center;
    flex-wrap: wrap;
}
.earnCount{
    font-size: 20px;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: unset;
    margin-bottom: 20px;
    /* padding: 0 60px; */
    /* border-right: 1px solid #999; */
}
.earnCountNum{
    font-size: 32px;
    color: #fff;
    color: #FC8704;
    padding-bottom: 10px;
    text-align: center;
}
.earnCenter{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 121px;
}
.earnCenter img{
    /* height: 263px; */
    margin-top: 63px;
    width: 60%;
}
.greyLine{
    width: 1px;
    background: #999;
    height: 64px;
    margin: 0 59px;
    display: none;
}
.earnCenter div{
    font-size: 20px;
    color: #fff;
    padding-top: 26px;
}
.botMain{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0 62px;
}
.botBox{
    display: flex;
    align-items: flex-start;
    /* flex-direction: column; */
    width: 204px;
    padding-right: 98px;
    padding-bottom: 35px;
}
.botBo img{
    
}
.botBoxText{
    
}
.hengLine{
    height: 1px;
    width: 80%;
    background: #999;
    margin-bottom: 58px;
}
.shareText{
    font-size: 20px;
    color: #fff;
}
.botBoxShareT{
    font-size: 16px;
    color: #fff;
    font-weight: 100;
}
.nowEggPng{
    position: relative;
    width: 356px;
    display: flex;
    /* width: 100%; */
    margin-left: 240px;
    flex-direction: column;
    font-size: 44px;
}
.nowEggPng img {
    width: 97px;
}
.jiantoubox{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.jiantou{
    margin-left: 15px;
    width: 100px !important;
}
@media screen and (max-width:1600px) {

    .nowEggPng{
      margin-left: 60px;
    }
    .earnMain{
        margin: 0 60px;
    }
}
@media screen and (max-width:1225px) {

    .botMain{
      justify-content: center;
    }
}
</style>